<template>
  <div class="border">
    <div class="lan"></div><span class="p">产品列表</span>
    <div class="erhang">
      <el-input placeholder="请输入内容" v-model="input4" style="margin-left:2%;width: 20%;" >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <span style="margin-left:2%;font-size:85%">选择类型*</span>
              <el-select v-model="type" placeholder="请选择"  style="margin-left:2%;">
                <el-option v-for="item4 in options10" :key="item4.value" :label="item4.typeName" :value="item4.id">
                </el-option>
              </el-select>
       <el-button type="primary" style="margin-left:2%;background-color:#2d8cf0" @click="selectVal">搜索</el-button>
      <el-button type="primary" style="margin-left:25%;background-color:#2d8cf0" @click="addType">新增产品</el-button>
      <el-button type="primary" style="margin-left:20px;background-color:#2d8cf0" @click="exportData">导出</el-button>
    </div>
    <div class="table" style="font-size:10px">
      <el-table :data="list1" stripe style="width: 98%; font-size: 15px" size="mini" id="out-table">
        <el-table-column prop="id" label="序号" align="center" min-width="15%"> </el-table-column>
         <el-table-column prop="proname" label="产品名称" align="center" min-width="15%"> </el-table-column>
         <el-table-column prop="typeName" label="产品类型" align="center" min-width="15%"> </el-table-column>
          <el-table-column prop="price" label="产品价格" align="center" min-width="15%"> </el-table-column>
           <el-table-column prop="surpluscount" label="产品数量" align="center" min-width="15%"> </el-table-column>
            <el-table-column prop="products" label="产品描述" align="center" min-width="15%"> </el-table-column>
        <el-table-column prop="bannerId" label="操作" align="center" min-width="15%">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="create(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="secKill(scope.row)">设置秒杀</el-button>
            <el-button type="text" size="mini" @click="deleteById(scope.row)">删除</el-button>
            
            
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="设置秒杀商品" :visible.sync="dialogFormVisible">

        <!-- 新增秒杀弹框 -->
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.proname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="秒杀价格" :label-width="formLabelWidth">
          <el-input v-model="form.killPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="秒杀数量" :label-width="formLabelWidth">
          <el-input v-model="form.purCount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="秒杀日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.startDate"
            align="right"
            format="yyyy-MM-dd hh:mm:ss"
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetime"
            placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addKill">确 定</el-button>
      </div>
    </el-dialog>




    </div>
  </div>
</template>

<script>
import {export2Excel} from "@/components/util.js"
import Vue from 'vue'
window.Event = new Vue()
import axios from 'axios';
export default {
  data() {
    return {
        //类型下拉框
      options10:"",
     type:'',
     input4:'',
      columns:[
        {title:"产品名称",key:"proname"},
        {title:"产品类型",key:"typeName"},
        {title:"产品价格",key:"price"},
        {title:"产品数量",key:"surpluscount"},
        {title:"产品描述",key:"products"},
      ],
      list1: [],
       dialogFormVisible: false,
       form:''
    }
  },
  created() {
    this.getType();  
    this.getList();
  },
  methods: {
     exportData() {
       export2Excel(this.columns, this.list1, "产品列表详情")
     },
    getType(){
        axios({
        url: "/api/product/getTypeList",
        method: "GET",
      }).then(res => {
        this.options10  = res.data.data
      })
    },
    getList() {
      axios({
        url: "/api/product/getProList",
        method: "GET",
        params: {
          proname: this.input4,
          type:this.type,
        }
      }).then(res => {
        this.list1 = res.data.data
      })
    },
    selectVal() {
      this.getList();
    },
    deleteById(sss){
      axios({
        url: "/api/product/deletePro",
        method: "GET",
        params: {
          id:sss.id
        }
      }).then(res => {
        this.getList()
      })
    },
    create(sss){
      this.$router.push({ path: '/editPro'+"",query:{id:sss.id}  });
    },
    addType(){
      
      this.$router.push({ path: '/addPro' });
    },
    secKill(row){
        this.dialogFormVisible=true;
        this.form=row;
    },
    addKill(){
      this.dialogFormVisible=false;
      this.form.proId=this.form.id;
      this.form.id=null;
       axios({
        url: "/api/second/addKill",
        method: "post",
        params: this.form
      }).then(res => {
        this.getList()
      })
    }

  },
}
</script>

<style>
html,
body {
  height: 100%;
  background-color: #f2f7fb;
}

.table {
  margin-top: 20px;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

html {
  display: block;
}

.border {
  border-width: 0px;
  /* position: absolute; */
  left: 0px;
  top: 0px;
  width: 88%;
  height: 912px;
  background: inherit;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 6%;
  margin-top: 10px;
}

.erhang {
  margin-top: 20px;
}

.lan {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 20px;
  margin-top: 10px;
  display: inline-block;
}

.p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
  margin-left: 30px;
  display: inline-block;
  margin-top: 10px;
}

.el-switch__label--left {
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__core {
  width: 50px !important;
}

.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}

.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
</style>